import React, { useEffect, useLayoutEffect, useState, useRef } from 'react'
import './Todo.css'
import { Button, Picker } from 'antd-mobile'
import { BankcardOutline } from 'antd-mobile-icons'
import basicColumns from '../../components/Times/TimeWekk'
import '../../components/Times/calendar.css'
import { barFunction, barFunction2, pieFunction, lineFunction } from './Echarts'
import { useDispatch, useSelector } from 'react-redux'


export default function Todo() {

    
    const data = useSelector(state => state.DetailSliceReducer.userDetail2);

    const bar = useRef(null)
    const bar2 = useRef(null)
    const pie = useRef(null)
    const line = useRef(null)
    const [value, setValue] = useState(['2023年', '6月'])
    const [money, setMoney] = useState(['0'])

    // 第0为支出  第1为收入，
    const [visible1, setVisible1] = useState(0)
    const [visible2, setVisible2] = useState(false)

    // 类型数据
    const [typeDetail, setTypeDetail] = useState([])
    const [dataAll, setDataAll] = useState([])
    // 数据转换
    // 类型详情数据
    useEffect(() => {
        let typeX = [{
            billType: 0,
            typeAndMoneyAndYear: [
                // {
                //     time: null,
                //     typeAndMoney: [
                //         { type: null, money: 0 }
                //     ],
                //     MonthMoney: 0
                // }
            ]
        }, {
            billType: 1,
            typeAndMoneyAndYear: [
                // {
                //     time: null,
                //     typeAndMoney: [
                //         { type: null, money: 0 }
                //     ],
                //     MonthMoney: 0
                // }
            ]
        }]
        // 第一个为支出，第二个为收入
        // let MonthMoney = [0, 0]
        data.map(item => {
            if (item.billType == 0) {
                // console.log('item.billType', item.billType);
                let confirm = 0
                // 时间存在都前提
                typeX[0].typeAndMoneyAndYear = typeX[0].typeAndMoneyAndYear.map(items => {
                    // 如果2022年2月存在，则typeAndMoney.map循环加入类型
                    if (items.time === item.time.substring(0, item.time.indexOf('月') + 1)) {
                        // 记录每个月的总金额
                        items.MonthMoney = items.MonthMoney + item.money
                        items.MonthMoney = Math.floor(items.MonthMoney * 100) / 100
                        // 时间数据存在
                        confirm = 1
                        // 每种类型的钱
                        let money = 0
                        // 如果类型存在的前提
                        items.typeAndMoney = items.typeAndMoney.map(itemss => {
                            // 如果类型存在
                            if (itemss.type === item.type[0]) {
                                money = itemss.money + item.money
                                // 转化成两位小数,防止20.00变为20
                                money = Math.floor(money * 100) / 100
                                return { ...itemss, money }
                            } else {
                                // 如果是新类型，则占时不变
                                return itemss
                            }
                        })
                        // 如果类型不存在
                        if (money === 0) {
                            items.typeAndMoney.push({
                                type: item.type[0],
                                money: item.money
                            })
                        }

                        return items

                    } else {
                        // 如果时间不存在
                        return items
                    }
                })
                // 时间不存在时
                if (confirm == 0) {
                    typeX[0].typeAndMoneyAndYear.push({
                        time: item.time.substring(0, item.time.indexOf('月') + 1),
                        typeAndMoney: [{
                            type: item.type[0],
                            money: item.money
                        }],
                        MonthMoney: item.money
                    })
                }
            } else {
                let confirm = 0
                // 时间存在都前提
                typeX[1].typeAndMoneyAndYear = typeX[1].typeAndMoneyAndYear.map(items => {

                    // 如果2022年2月存在，则typeAndMoney.map循环加入类型
                    if (items.time === item.time.substring(0, item.time.indexOf('月') + 1)) {
                        // 记录每个月的总金额
                        items.MonthMoney = items.MonthMoney + item.money
                        items.MonthMoney = Math.floor(items.MonthMoney * 100) / 100
                        // 时间数据存在
                        confirm = 1
                        // 每种类型的钱
                        let money = 0
                        // 如果类型存在的前提
                        items.typeAndMoney = items.typeAndMoney.map(itemss => {
                            // 如果类型存在
                            if (itemss.type === item.type[0]) {
                                money = itemss.money + item.money
                                // 转化成两位小数,防止20.00变为20
                                money = Math.floor(money * 100) / 100
                                return { ...itemss, money }
                            } else {
                                // 如果是新类型，则占时不变
                                return itemss
                            }
                        })
                        // 如果类型不存在
                        if (money === 0) {
                            items.typeAndMoney.push({
                                type: item.type[0],
                                money: item.money
                            })
                        }

                        return items

                    } else {
                        // 如果时间不存在
                        return items
                    }
                })
                // 时间不存在时
                if (confirm === 0) {
                    typeX[1].typeAndMoneyAndYear.push({
                        time: item.time.substring(0, item.time.indexOf('月') + 1),
                        typeAndMoney: [{
                            type: item.type[0],
                            money: item.money
                        }],
                        MonthMoney: item.money
                    })
                }
            }
        })
        setTypeDetail(typeX)
        // 是否存在对应时间数据
        let check = 0
        let itemEcharts = [{ type: '', money: 0 }]
        // visible1: 0是支出  1是收入
        // typeX：第一个是支出，第二个是收入
        let allMoney=0
        itemEcharts = typeX[visible1]['typeAndMoneyAndYear'].map(item => {
            if (item.time === value[0] + value[1]) {
                check = 1
                allMoney = item.MonthMoney
                barFunction(bar.current, item)
                pieFunction(pie.current, item)
            }
        })
        if (check === 0) {
            allMoney=0
            barFunction(bar.current, undefined)
            pieFunction(pie.current, undefined)
        }
        // 每个月总金额
        setMoney(allMoney)
        // 每年数据Echarts
        let dataAll = [
            {
                billType: 0,
                datas: [
                    // { year: null, data: [] }
                ]
            },
            {
                billType: 1,
                datas: []
            },

        ]
        typeX.map(item=>{
            if (item.billType==0){
                item.typeAndMoneyAndYear.map(itemMonth=>{
                    let confirm = 0
                    dataAll[0].datas = dataAll[0].datas.map(items => {
                        let value = items.data
                        // 判断是否存在对应的年份
                        if (items.year === itemMonth.time.substring(0, 4)) {
                            value[parseInt(itemMonth.time.substring(5, itemMonth.time.indexOf('月'))) - 1] += itemMonth.MonthMoney
                            confirm = 1
                            return { ...items, data: value }
                        } else {
                            return items
                        }
                    })
                    // 表示不存在此年份
                    if (confirm === 0) {
                        let data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                        data[parseInt(itemMonth.time.substring(5, itemMonth.time.indexOf('月'))) - 1] += itemMonth.MonthMoney
                        dataAll[0].datas.push({
                            year: itemMonth.time.substring(0, 4),
                            data: data
                        })
                    }        
                })
            }else{
                item.typeAndMoneyAndYear.map(itemMonth => {
                    let confirm = 0
                    dataAll[1].datas = dataAll[1].datas.map(items => {
                        let value = items.data
                        // 判断是否存在对应的年份
                        if (items.year === itemMonth.time.substring(0, 4)) {
                            value[parseInt(itemMonth.time.substring(5, itemMonth.time.indexOf('月'))) - 1] += itemMonth.MonthMoney
                            confirm = 1
                            return { ...items, data: value }
                        } else {
                            return items
                        }
                    })
                    // 表示不存在此年份
                    if (confirm === 0) {
                        let data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                        data[parseInt(itemMonth.time.substring(5, itemMonth.time.indexOf('月'))) - 1] += itemMonth.MonthMoney
                        dataAll[1].datas.push({
                            year: itemMonth.time.substring(0, 4),
                            data: data
                        })
                    }
                })
            }
        })
        setDataAll(dataAll[visible1].datas)
        // // 如果数据data是空，则为undefined
        barFunction2(bar2.current, dataAll[visible1].datas[0]?.data)

        lineFunction(line.current, dataAll[visible1].datas)
        // console.log('visible1', visible1);

    }, [data, visible1, value])


    return (
        <div className='Todo'>
            <div className='TodoTop'>
                <div className='TodoTopOne'>
                    <div className='TodoTopTime'>
                        <Button
                            onClick={() => {
                                setVisible2(true)
                            }}
                        >
                            <span>{value}</span>
                            <BankcardOutline />
                        </Button>
                        <Picker
                            columns={basicColumns}
                            visible={visible2}
                            onClose={() => {
                                setVisible2(false)
                            }}
                            value={value}
                            onConfirm={v => {
                                setValue(v)
                            }} />
                    </div>
                    <div className='TodoTopChangeType'>
                        <Button
                            onClick={() => {
                                setVisible1(0)
                            }}
                            className='select'>
                            支出
                        </Button>
                        <Button
                            onClick={() => {
                                setVisible1(1)
                            }}
                        >
                            收入
                        </Button>
                    </div>
                </div>
                <div className='TodoTopTwo'>
                    <p>共{visible1 === 0 ? '支出' : '收入'}</p>
                    <p className='TodoTopTwoMoney'>¥&nbsp;{money}</p>
                </div>
            </div>
            <div className='TodoBody'>
                <div className="panel">
                    <h2>{visible1 === 0 ? '支出' : '收入'}构成</h2>
                    <div className="chart" ref={bar}></div>
                    <div className="panel-footer"></div>
                </div>
                <div className="panel">
                    <h2>
                        每年{visible1 === 0 ? '支出' : '收入'}情况
                        {
                            dataAll.map((item) => <Button key={item.year} onClick={() => {
                                barFunction2(bar2.current, item.data)
                            }}>{item.year}</Button>)
                        }
                    </h2>
                    <div className="chart" ref={bar2}></div>
                    <div className="panel-footer"></div>
                </div>
                <div className="panel">
                    <h2>类型金额</h2>
                    <div className="chart" ref={pie}></div>
                    <div className="panel-footer"></div>
                </div>
                <div className="panel">
                    <h2>每年{visible1 === 0 ? '支出' : '收入'}情况</h2>
                    <div className="chart" ref={line}></div>
                    <div className="panel-footer"></div>
                </div>
            </div>
        </div>
    )
}
